<template>
	<div class="main-box box-shadow">
		<el-table
			:data="data"
			:header-row-class-name="tableHead"
			:row-class-name="tableRowClass"
			:row-style="{'height':'40px'}"
			:header-cell-style="{'background':'rgba(246, 247, 248, 1)'}"
			max-height="683"
			height="683"
		>
			<el-table-column
				label="序号"
				align="center"
				prop="id"
				width="125"
				></el-table-column>
			<el-table-column
				label="单号"
				prop="orderId"
				></el-table-column>
			<el-table-column
				label="号牌号码"
				prop="num"
				></el-table-column>
			<el-table-column
				label="品牌车型"
				prop="pp"
				></el-table-column>
			<el-table-column
				label="使用单位"
				prop="dw"
				></el-table-column>
			<el-table-column
				width="435"
				prop="price"
				align="right"
				>      
				<template slot="header" slot-scope="scope">
					<div class="search-box left">
							<div class="left search"><img style="position: relative;top: 1px;" width="14" src="../../assets/images/search.svg" /></div>
							<div class="left search-input">
								<input type="text" 
									:key="scope.$index"
									placeholder="输入信息进行查询"/>
							</div>
					</div>
					<div class="left" style="line-height: 35px;">
						<div class="left" style="margin-left: 10px;">
							<img width="20" style="position: relative;top: 4px;color: #333333;" src="../../assets/images/shaixuan.svg" />
						</div>
						<div class="left" style="margin-left: 20px;">金额</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column
				width="47"
			></el-table-column>
		</el-table>
		<div class="table-foot">
			<div class="table-foot-download" @click="test">
				<img 
          width="25"
          style="position: relative;top: -4px;"
          src="../../assets/images/download.svg" />
				<span style="position: relative;top: -10px;margin-left: 10px;">下载报表</span>
			</div>
			<div class="table-sum">
				<span style="margin-right: 48px;">合计</span>
				<span>123456</span>
			</div>
		</div>
	</div>
</template>

<script>
	const tableData = [
		{
			id:1,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:2,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:3,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:4,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:5,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:6,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:6,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:6,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:6,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:6,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:6,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:6,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:6,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:6,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
		{
			id:6,
			orderId:'AA012112001',
			num:'AA012112001',
			pp:'福龙马牌FLM5160TSLXD4',
			dw:'杭州鸿达市政公用事业服务有限公司',
			price:1280.00
		},
	]
	export default{
		data() {
			return {
				msg:'这是维修\n档案页面',
				data:tableData,
				msgg:''
			}
		},
		mounted() {
			
		},
		methods:{
			tableRowClass:function({rowIndex}) {
				if (rowIndex % 2 === 1) {
					return 'table-row-color';
				}
				return '';
			},
			tableHead:function(){
				return 'table-head-2';
			},
			test(){
				var a = {
							id:6,
							orderId:'AA012112001',
							num:'AA012112001',
							pp:'福龙马牌FLM5160TSLXD4',
							dw:'杭州鸿达市政公用事业服务有限公司',
							price:1280.00
						};
				this.data.push(a);
			}
		}
	}
</script>

<style lang="css" scoped>
	.main-box{
		height: 750px;
		margin: 10px;
		border-radius: 8px;
		overflow: hidden;
	}
	.search-box{
		width: 330px;
		height: 35px;
		background-color: white;
	}
	.search{
		line-height: 35px;
		margin-left: 10px;
	}
	.search-input input{
		border: none;
		outline: medium;
		margin: 10px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 10px;
		font-family: PingFangSC-Medium;
		white-space: nowrap;
	}
	.left{
		float: left;
	}
	.table-foot{
		height: 22px;
		padding: 9px 27px;
		background-color: rgba(250, 140, 22, 0.1);
	}
	.table-foot-download{
		cursor: pointer;
		width: 70px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 14px;
		font-family: PingFangSC-Medium;
		white-space: nowrap;
		line-height: 20px;
		float: left;
	}
	.table-sum{
		float: right;
		margin-right: 30px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 14px;
		white-space: nowrap;
	}
</style>
